<template>
  <div class="table_news">
    <div class="table_news_top">
      <!-- <header-box text="文化要素一览"/> -->
      <p class="table_news_top_tit">文化要素一览</p>
      <div class="noData"
           v-if="topTD.length==0">暂无数据</div>
      <table-box v-else
                 :th="th"
                 :td="topTD"
                 typeOf="open" />
    </div>
    <div class="table_news_bottom">
      <div class="table_news_bottom_left">
        <header-box text="★ 核心基因提取 ★"/>
        <div class="noData" v-if="bottomTD.length==0">暂无数据</div>
        <div class="table_news_bottom_text scroll_box" :style="{height:isShowBtn||isImgBtn?'calc(100% - 150px)':'calc(100% - 100px)'}">
          <p>{{ bottomTD }}</p>
        </div>
        <!-- 按钮区 -->
        <div class="table_news_bottom_btn">
          <button class="table_news_bottom_btn_li" @click="onClickeInfo" v-if="isShowBtn">转化利用项目</button>
          <button class="table_news_bottom_btn_li" @click="onClickeReport" v-if="isShowBtn">基因解码报告</button>
          <button class="table_news_bottom_btn_li" @click="onClickeImg" v-if="isShowBtn">图片视频资料</button>
          <button class="table_news_bottom_btn_li" @click="onClickeJiangGan" v-if="isImgBtn">图片视频资料</button>
        </div>
        <!-- <div class="table_news_bottom_btn">
          <button class="table_news_bottom_btn_li" @click="onClickeImg" v-if="this.id==='dc935a8d-8a9b-4deb-ab28-df56c0f31a6c'">图片视频资料</button>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import TableBox from '../../components/TableBox.vue'
import HeaderBox from '../../components/Header.vue'
export default {
  name: 'TableNews',
  props: {
    id: {
      type: String,
      default: '',
    },
    title:{
      type:String,
      default:''
    }
  },
  components: {
    TableBox,
    HeaderBox,
  },
  data() {
    return {
      th: [
        { name: '基因类别', props: 'CEBaseType' },
        { name: '要素描述', props: 'CEBaseContent' },
      ],
      topTD: [],
      bottomTD: [],
      imgList:[]
    }
  },
  mounted() {
    this.getInfo()
  },
  computed:{
    isShowBtn(){
      return this.title==='大禹祭典'||this.title==='绍兴黄酒酿制技艺'||this.title==='徐渭青藤画派'||this.title==='清白泉'||this.title==='鲁迅故里'
    },
    isImgBtn(){
      return this.id==='dc935a8d-8a9b-4deb-ab28-df56c0f31a6c'
    }
  },
  methods: {
    getInfo() {
      this.$api
        .getInfoList({
          DecodeID: this.id,
        })
        .then((res) => {
          if (res.data.code != 0) return
          //console.log(res)
          let list = res.data.data[0]
          let bottom = ''
          //this.bottomTD = this.getTD(list,'baseInfoCore');
          list.baseInfoCore.forEach((i, index) => {
            bottom += i.CEBaseContent
          })
          this.bottomTD = bottom
          this.getTD(list, 'baseInfoList')
        })
    },
    getTD(list, type) {
      let TD = []
      let img = []
      list[type].forEach((i) => {
        TD.push({
          CEBaseType: `${i.CEBaseType} / ${i.CEBaseSubType}`,
          CEBaseContent: i.CEBaseContent,
        })
        let arr = JSON.parse(i.FileUrl)
        if(arr.length!=0){
          arr.forEach(i=>img.push(i.response.url))
        }
      })
      this.imgList = img
      this.topTD = TD
    },
    onClickeInfo(){
      this.$emit('clickBtn','info')
    },
    onClickeReport(){
      this.$emit('clickBtn','report')
    },
    onClickeImg(){
      this.$emit('clickImgBtn',this.imgList)
    },
    onClickeJiangGan(){
      this.$emit('clickImgBtn',[
        'http://big-file.oss-cn-hangzhou-zwynet-d01-a.internet.cloud.zj.gov.cn/img/2021/202111/20211102/1635831385809.jpg',
        'http://big-file.oss-cn-hangzhou-zwynet-d01-a.internet.cloud.zj.gov.cn/img/2021/202111/20211102/1635831318374.jpg',
        'http://big-file.oss-cn-hangzhou-zwynet-d01-a.internet.cloud.zj.gov.cn/img/2021/202111/20211102/1635831267136.png',
        'http://big-file.oss-cn-hangzhou-zwynet-d01-a.internet.cloud.zj.gov.cn/img/2021/202111/20211102/1635831208859.png',
        'http://big-file.oss-cn-hangzhou-zwynet-d01-a.internet.cloud.zj.gov.cn/img/2021/202111/20211102/1635830838928.mp4'
      ])
    }
  },
}
</script>

<style scoped>
.table_news {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
}
.table_news_top,
.table_news_bottom {
  width: 100%;
  flex: 1;
  height: 50%;
  position: relative;
}
.table_news_bottom{
  display: flex;
  flex-flow: nowrap row;
  justify-content: space-between;
}
.table_news_bottom_left{
  width: 100%;
  position: relative;
}
.table_news_top_tit {
  text-align: center;
  color: #fff;
  font-size: 20px;
  margin-top: 10px;
  font-weight: bold;
  background-image: -webkit-gradient(
    linear,
    0 0,
    0 bottom,
    from(#fff),
    to(#d7d7d7)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.noData {
  padding: 10px 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 20px;
  border: 3px solid rgb(15, 127, 180);
  border-radius: 5px;
}
.table_news_bottom_text,.table_news_bottom_img {
  color: #fff;
  width: 95%;
  margin: auto;
  height: calc(100% - 80px);
  font-size: 20px;
  padding-top: 20px;
  background: rgba(50, 207, 230, .09);
  padding: 10px 20px;
  line-height: 40px;
  border-radius: 10px;
  margin-top: 10px;
}
.table_news_bottom_text{
  text-indent:2em;
}
/* 按钮区 */
.table_news_bottom_btn{
  display: inline-block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 70px;
  padding: 10px 20px;
}
.table_news_bottom_btn_li{
  height: 45px;
  border: 2px solid rgba(50, 207, 230, .5);
  background: rgba(50, 207, 230, .3);
  transition: .2s;
  cursor: pointer;
  border-radius: 10px;
  color: #fff;
  font-size: 16px;
  padding: 0 20px;
  margin: 0 10px;
}
.table_news_bottom_btn_li:hover{
  background: rgba(50, 207, 230, .1);
}
.table_news_bottom_btn_li:active{
  background: none;
}
</style>
